<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            v-for="(item, index) in imgs"
            :key="index"
            @click="playImg(index)"
          >
            <img :src="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 推荐歌单 -->
    <div class="remLists">
      <div class="title">推荐歌单</div>
      <div class="content swiper-container-01">
        <ul class="swiper-wrapper">
          <!-- <li>
            <div class="img">
              <img
                src="https://p1.music.126.net/JKhJj8e-_PjL9ilHqdaPmQ==/109951166442699958.jpg"
                alt=""
              />
            </div>
            <p>歌曲名称</p>
            <span><i class="iconfont icon-erji"></i>123万</span>
          </li> -->
          <li v-for="(item, index) in songs" :key="index" class="swiper-slide">
            <router-link
              tag="div"
              class="img"
              :to="'/rank/ranklist?id=' + item.id"
            >
              <div class="img">
                <img :src="item.picUrl" />
              </div>
            </router-link>
            <p>{{ item.name }}</p>
            <span
              ><i class="iconfont icon-24gf-headphones"></i
              >{{
                item.playCount > 10000
                  ? (item.playCount / 10000).toFixed(1) + "万"
                  : item.playCount
              }}</span
            >
          </li>
        </ul>
      </div>
      <div class="RecommendedSongs">
        <div class="title">推荐歌曲</div>
        <ul>
          <li
            v-for="(item, index) in RecommendedSongs"
            :key="item.id"
            @click="playmusic(index)"
            v-show="index < 8"
          >
            <div>
              <span>{{ index + 1 }}</span>
            </div>
            <div>
              <h4>{{ item.name }}</h4>
              <p>{{ item.song.artists[0].name }}</p>
            </div>
            <div class="play">
              <span class="iconfont icon-bofang"></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="video">
        <div class="title">MV</div>
        <div class="swiper-container-02">
          <ul class="swiper-wrapper">
            <!-- <li class="swiper-slide" v-for="(item) in videos" :key="item.id"> -->
              <router-link  class="swiper-slide" v-for="(item) in videos" :key="item.id" tag="li" :to="'/recommend/mv?id='+item.id">
              <div class="mvs">
                <img :src="item.picUrl" />
              </div>
              <div class="mv_test">
                <p>{{ item.name }}</p>
              </div>
              </router-link>
            <!-- </li> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getPersonalizedr,
  getRecommendedSongs,
  getVideo,
} from "../api/recommend";
import headerNav from "../components/base/headerNav.vue";
import Swiper from "swiper";

export default {
  components: {
    headerNav,
  },
  data() {
    return {
      imgs: null,
      // 歌单列表
      songs: null,
      RecommendedSongs: [],
      videos: null, //mv
    };
  },
  created() {
    getBanner().then((data) => {
      // console.log(data);
      this.imgs = data.banners;
    });
    getPersonalizedr().then((data) => {
      // console.log(data);
      this.songs = data.result;
    });
    //获取歌曲
    getRecommendedSongs().then((item) => {
      // console.log(item);
      this.RecommendedSongs = item.result;
    });
    //获取MV
    getVideo().then((item) => {
      this.videos = item.result;
      // console.log(this.videos);
    });
  },
  mounted() {
    new Swiper(".swiper-container-01", {
      pagination: ".swiper-pagination-01",
      slidesPerView: 3, //显示个数
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 5, //div之间间距
    });
    new Swiper(".swiper-container-02", {
      slidesPerView: 2, //显示个数
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 20, //div之间间距
    });
  },
  methods: {
    playmusic(index) {
      let id = this.RecommendedSongs[index].id;
      this.$emit("get-playmusic-id", id);
    },
    playImg(index) {
      let id = this.imgs[index].targetId;
      console.log(id);
      if (id != 0) {
        this.$emit("get-playImg-id", id);
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="less">
.banner {
  &::before {
    content: "";
    display: block;
    height: 124px;
    background-color: #d44439;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  position: relative;
  .imgs {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 96%;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

.remLists {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .content {
    width: 100%;
    overflow: hidden;
    ul {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-around;
      li {
        // flex: 0 0 32%;
        position: relative;
        span {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 12px;
          i {
            font-size: 12px;
            // vertical-align: middle;
          }
        }
        .img {
          background-color: aqua;
          min-height: 50px;
          width: 100%;
          border-radius: 3px;
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.RecommendedSongs {
  ul {
    li {
      display: flex;
      min-height: 40px;
      border-bottom: 1px solid #efefef;
      padding: 5px 0;
      position: relative;
      &:nth-child(1) {
        border-top: 1px solid #efefef;
      }
      span {
        padding: 15px 15px;
        font-size: 16px;
        line-height: 40px;
        color: #6d6e6e;
      }
      .icon-bofang {
        font-size: 20px;
      }
      p {
        font-size: 12px;
        color: #929393;
      }
      .play {
        position: absolute;
        right: 5px;
      }
    }
  }
}
.video {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .swiper-container-02 {
    width: 100%;
    overflow: hidden;
    padding-bottom: 80px;
    display: flex;
    .swiper-wrapper {
      z-index: 0;
      .swiper-slide {
        .mvs {
          width: 50vw;
          img {
            width: 50vw;
            height: 20vh;
          }
        }
        .mv_test {
          padding-left: 15px;
          padding-top: 5px;
          p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #6d6e6e;
          }
        }
      }
    }
  }
}
</style>